{extend name="layout" /}

{block name="style"}
<link href="__PLUG__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}

    <div class="row">
        <div class="col-md-12">
            <div class="block nav-tabs-custom">
                {notempty name="tab_nav"}
                <ul class="nav nav-tabs">
                    {volist name="tab_nav['tab_list']" id="tab"}
                    <li {eq name="tab_nav.active" value="$key"}class="active"{/eq}>
                        <a href="{$tab.url}">{$tab.title}</a>
                    </li>
                    {/volist}
                </ul>
                {else/}
                <div class="block-header bg-gray-lighter">
                    <h3 class="block-title">{$page_title}</h3>
                </div>
                {/notempty}
                <div class="block-content tab-content">
                    <div class="tab-pane active">
                        {notempty name="menus"}
                        <div class="row data-table-toolbar">
                            <div class="col-sm-12">
                                <form action="{$Request.url}" method="get">
                                <div class="toolbar-btn-action mb5">
                                    <a title="{:lang('新增')}" style="background-color: #409EFF !important;" class="btn btn-primary  btn-sm layeradd" href="{:url('add', ['module' => $Request.param.group])}"><i class="fa fa-plus-circle "></i> {:lang('新增')}</a>
                                    <button title="{:lang('保存')}" type="button" class="btn btn-default disabled  btn-sm" id="save" disabled><i class="fa fa-check-circle-o"></i> {:lang('保存节点')}</button>
                                    <button title="{:lang('隐藏禁用节点')}" type="button" class="btn btn-danger  btn-sm" id="hide_disable"><i class="fa fa-eye-slash"></i> {:lang('隐藏禁用节点')}</button>
                                    <button title="{:lang('显示禁用节点')}" style="background-color: #409EFF;" type="button" class="btn btn-info  btn-sm" id="show_disable"><i class="fa fa-eye"></i> {:lang('显示禁用节点')}</button>
                                    <button title="{:lang('展开所有节点')}" type="button" class="btn btn-success  btn-sm" id="expand-all"><i class="fa fa-plus"></i> {:lang('展开所有节点')}</button>
                                    <button title="{:lang('收起所有节点')}" type="button" class="btn btn-warning  btn-sm" id="collapse-all"><i class="fa fa-minus"></i> {:lang('收起所有节点')}</button>
                                    <span class="form-inline">
                                        <input class="form-control" type="text" name="max" value="{$Request.get.max|default=''}" placeholder="{:lang('显示层数')}">
                                    </span>
									<span class="form-inline" style="background-color: #409EFF !important;">
                                        <a style="background-color: #409EFF !important;" href="{:url('icon_view')}" target="_blank" class="btn btn-info  btn-sm">{:lang('查看图标')}</a>
                                    </span>
                                </div>
                                </form>
                            </div>
                        </div>

                        <div class="dd" id="menu_list">
                            <ol class="dd-list">{$menus|raw}</ol>
                        </div>
                        {/notempty}
                    </div>
                </div>
            </div>
        </div>
    </div>

{/block}

{block name="script"}
<script src="__PLUG__/jquery-nestable/jquery.nestable.js"></script>
<script>
    $(document).ready(function(){

        // 保存节点
        $('#save').click(function(){
            Stars.loading();
            $.post("{:url('save')}", {menus: $('#menu_list').nestable('serialize')}, function(data) {
                Stars.loading('hide');
                if (data.code) {
                    $('#save').removeClass('btn-success').addClass('btn-default disabled');
                    Stars.notify(data.msg, 'success');
                } else {
                    Stars.notify(data.msg, 'danger');
                }
            });
        });

        // 初始化节点拖拽
        $('#menu_list').nestable({maxDepth:4}).on('change', function(){
            $('#save').removeAttr("disabled").removeClass('btn-default disabled').addClass('btn-success');
        });

        // 隐藏禁用节点
        $('#hide_disable').click(function(){
            $('.dd-disable').hide();
        });

        // 显示禁用节点
        $('#show_disable').click(function(){
            $('.dd-disable').show();
        });

        // 展开所有节点
        $('#expand-all').click(function(){
            $('#menu_list').nestable('expandAll');
        });

        // 收起所有节点
        $('#collapse-all').click(function(){
            $('#menu_list').nestable('collapseAll');
        });

        // 禁用节点
        $('.dd3-content').on('click', '.disable', function(){
            var self     = $(this);
            var ids      = self.data('ids');
            var ajax_url = '{:url("disable", ["table" => "admin_menu"])}';
            Stars.loading();
            $.post(ajax_url, {ids:ids}, function(data) {
                Stars.loading('hide');
                if (data.code) {
                    self.attr('data-original-title', "{:lang('启用')}").removeClass('disable').addClass('enable')
                        .children().removeClass('fa-ban').addClass('fa-check-circle-o')
                        .closest('.dd-item')
                        .addClass('dd-disable');
                } else {
                    Stars.notify(data.msg, 'danger');
                }
            });
            return false;
        });

        // 启用节点
        $('.dd3-content').on('click', '.enable', function(){
            var self     = $(this);
            var ids      = self.data('ids');
            var ajax_url = '{:url("enable", ["table" => "admin_menu"])}';
            Stars.loading();
            $.post(ajax_url, {ids:ids}, function(data) {
                Stars.loading('hide');
                if (data.code) {
                    self.attr('data-original-title', "{:lang('禁用')}").removeClass('enable').addClass('disable')
                        .children().removeClass('fa-check-circle-o').addClass('fa-ban')
                        .closest('.dd-item')
                        .removeClass('dd-disable');
                } else {
                    Stars.notify(data.msg, 'danger');
                }
            });
            return false;
        });
    });

    var quickadd_href = "";

    $('.layeradd').click(function(e){
        e.preventDefault()
        quickadd_href = $(this).attr('href');
        quickadd_href = quickadd_href+'?layer=1';
        opensidebar(quickadd_href)
    });

    $('.layeredit').click(function(e){
        e.preventDefault()
        quickadd_href = $(this).attr('href');
        quickadd_href = quickadd_href;
        opensidebar(quickadd_href)
    });

    function opensidebar(url){
        layer.open({
            type: 2,
            title: false,
            closeBtn: false,
            shadeClose: true,
            scrollbar: true,
            offset: 'r',
            anim: '7',
            area: ['50%', '100vh'],
            content: url
        })
    }
</script>
{/block}
